<!--
 @Description:余额提现
 @author:张静
 @createTime: 2022-7-6 5:52:31 ?F10: PM?
 -->
<template>
	<view :style="skin">
		<zx-nav title="余额提现" bg="#fff" fixedTop noHoldHeight></zx-nav>
		<!-- <mescroll-body ref="mescrollRef" :top="topH" @init="mescrollInit" @down="downCallback" :up="upOption" :down="downOption">
			<view class="main">
				<view class="u-flex align-center justify-between">
					<text class="u-primary">账户余额 {{ userInfo.money || 0.0 }}元</text>
					<text class="u-tips-color">现额度为1-200元</text>
				</view>
				<view class="card mt28">
					<input type="digit" placeholder="请输入提现金额" v-model="money" @input="oninput" />
					<view class="mt20 u-border-top pt20"><input placeholder="请输入账户实名" v-model="tx_name" /></view>
				</view>
				<view class="mt20">最终到账金额：{{ totalmoney || 0.0 }}元</view>
				<view class="mt20 mb40">提现到账至您的微信余额，请填写正确的收款人姓名（微信实名认证的姓名）否则将会导致提现失败，提现发起后我们将会在48小时内处理您的提现。</view>
				<u-button @click="tixian" type="success" shape="circle" :loading="btnLoading" text="确认提现"></u-button>
			</view>
		</mescroll-body> -->
		<mescroll-body ref="mescrollRef" :top="topH" @init="mescrollInit" @down="downCallback" :up="upOption" :down="downOption">
			<view class="main">
				<view class="u-flex align-center justify-between">
					<text class="u-primary">账户余额 {{ userInfo.money || 0.0 }}元</text>
					<text class="u-tips-color">现额度为1-200元</text>
				</view>

				<view class="card mt28 flex justify-between align-center">
					<input type="digit" placeholder="请输入提现金额" v-model="money" @input="oninput" class="flex-sub" />
					<view class="u-primary" @tap="getallMoney">全部提现</view>
				</view>
				<view class="mt20">最终到账金额：{{ totalmoney || 0.0 }}元</view>
				<view class="group card mt20">
					<radio-group class="block margin-top" @change="RadioChange">
						<view class="checkgroup flex justify-center">
							<view class="radio-item">
								<label class="radio">
									<radio class="orange" :class="waytype == 'wechat' ? 'checked' : ''" :checked="waytype == 'wechat' ? true : false" value="wechat"></radio>
									<span>微信</span>
								</label>
							</view>

							<!-- 	<view class="radio-item">
								<label class="radio">
									<radio class="orange" :class="waytype == 'alipay' ? 'checked' : ''" :checked="waytype == 'alipay' ? true : false" value="alipay"></radio>
									<span>支付宝</span>
								</label>
							</view> -->
							<view class="radio-item">
								<label class="radio">
									<radio class="orange" :class="waytype == 'bank' ? 'checked' : ''" :checked="waytype == 'bank' ? true : false" value="bank"></radio>
									<span>银行卡</span>
								</label>
							</view>
						</view>
					</radio-group>
					<view class="tab-item" v-if="waytype == 'alipay'">
						<view class="row flex justify-between align-center">
							<view class="title"><view class="action">支付宝账户：</view></view>
							<view class="row-tex flex-sub"><input type="text" value="" placeholder="请输入支付宝账户" class="flex-sub" v-model="accountInfo.tx_number" /></view>
						</view>
						<view class="row flex justify-between align-center">
							<view class="title"><view class="action">真实姓名：</view></view>
							<view class="row-text flex-sub"><input type="text" value="" placeholder="请输入支付宝真实姓名" class="flex-sub" v-model="accountInfo.tx_name" /></view>
						</view>
					</view>
					<view class="tab-item" v-if="waytype == 'wechat'">
						<view class="row flex justify-between align-center">
							<view class="title"><view class="action">账户实名：</view></view>
							<view class="row-text flex-sub"><input type="text" value="" placeholder="请输入账户实名" class="flex-sub" v-model="accountInfo.tx_name" /></view>
						</view>
					</view>
					<view class="tab-item" v-if="waytype == 'bank'">
						<template v-if="accountInfo && accountInfo.tx_number">
							<view class="row flex justify-between align-center">
								<view class="title flex justify-between"><view class="action">银行卡账户：</view></view>
								<view class="row-text flex-sub">
									<input disabled type="text" value="" placeholder="请输入银行卡账户" class="flex-sub" v-model="accountInfo.tx_number" />
								</view>
							</view>
							<view class="row flex justify-between align-center">
								<view class="title flex justify-between"><view class="action">开户银行：</view></view>
								<view class="row-text flex-sub">
									<input type="text" value="" placeholder="请输入开户银行" disabled class="flex-sub" v-model="accountInfo.tx_address" />
								</view>
							</view>
							<view class="row flex justify-between align-center">
								<view class="title flex justify-between"><view class="action">开户姓名：</view></view>
								<view class="row-text flex-sub">
									<input disabled type="text" value="" placeholder="请输入开户姓名" class="flex-sub" v-model="accountInfo.tx_name" />
								</view>
							</view>
						</template>
						<view class="flex justify-end mt20">
							<navigator class="link" hover-class="none" url="/pages/mine/addbank">
								{{ accountInfo && accountInfo.tx_number ? '银行卡信息有误？去修改' : '还没有绑定银行卡？去绑定' }}
							</navigator>
						</view>
					</view>
				</view>
				<view class="mt20" v-if="waytype == 'wechat'">
					提现到账至您的微信余额，请填写正确的收款人姓名（微信实名认证的姓名）否则将会导致提现失败，提现发起后我们将会在48小时内处理您的提现。
				</view>
				<view class="mt40"><u-button @click="tixian" type="success" shape="circle" :loading="btnLoading" text="确认提现"></u-button></view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	data() {
		return {
			money: undefined,
			accountInfo: {
				tx_name: '',
				tx_number: '',
				tx_address: ''
			},
			btnLoading: false,
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				empty: {
					use: false
				},
				use: false,
				auto: false // 不自动加载
			},
			waytype: 'wechat',
			tx_type: 1
		};
	},
	computed: {
		...mapState(['userInfo', 'CustomBar']),
		topH() {
			return this.CustomBar + +uni.upx2px(20) + 'px';
		},
		totalmoney() {
			return this.money;
		}
	},
	onShow() {
		if (this.waytype == 'bank') {
			this.getPayment();
		}
	},
	mixins: [MescrollMixin],
	methods: {
		...mapActions(['getUserInfo']),
		oninput(e) {
			this.$nextTick(() => {
				let val = e.target.value.toString();
				val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
				val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				val = val.replace(/^0+\./g, '0.');
				val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
				val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';
				this.money = val;
				/* 要判断不能大于200和最大余额 */
				if (val < 1 || val > Math.min(this.userInfo.money, 200)) {
					uni.$u.toast('当前提现金额在1-' + Math.min(this.userInfo.money, 200) + '元之间');
				}
			});
		},
		downCallback(mescroll) {
			this.getUserInfo().then(() => {
				this.mescroll.endSuccess(0, false);
			});
		},
		tixian() {
			if (!this.money) {
				uni.$u.toast('请输入提现金额');
				return false;
			}
			/* 要判断不能大于200和最大余额 */
			if (this.money < 1 || this.money > Math.min(this.userInfo.money, 200)) {
				uni.$u.toast('当前提现金额在1-' + Math.min(this.userInfo.money, 200) + '元之间');
				return false;
			}
			if (!this.accountInfo.tx_name) {
				uni.$u.toast('请输入账户实名');
				return false;
			}
			this.btnLoading = true;
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					this.$postAction(this.$api.tixian, {
						money: this.money,
						tx_type: this.tx_type,
						code: loginRes.code,
						...this.accountInfo
					})
						.then(da => {
							if (da.code == 0) {
								this.getUserInfo();
							}
						})
						.finally(() => {
							uni.$u.toast('申请提现成功' + this.tx_type == 1 ? ',审核通过后，需要点击确认收款才能到账' : '');
							this.btnLoading = false;
							setTimeout(() => {
								uni.$u.BackPage();
							}, 800);
						});
				},
				fail: () => {
					this.btnLoading = false;
				}
			});
		},
		//全部提现
		getallMoney() {
			this.money = this.userInfo.money;
		},
		RadioChange(e) {
			this.waytype = e.detail.value;
			this.tx_type = e.detail.value == 'wechat' ? 1 : e.detail.value == 'alipay' ? 2 : 3;
			this.accountInfo = {
				tx_name: this.waytype == 'bank' ? '12' : '',
				tx_number: '',
				tx_address: ''
			};
			if (this.waytype == 'bank') {
				this.getPayment();
			}
		},
		getPayment() {
			this.$postAction(this.$api.getPayment, null, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0 && da.data && da.data.card_id) {
					this.accountInfo.tx_name = da.data.card_name;
					this.accountInfo.tx_number = da.data.card_id;
					this.accountInfo.tx_address = da.data.cert_name;
					console.log('哈哈哈哈哈啊哈', this.accountInfo);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	color: #1c1c1e;
	font-size: 28upx;
}
.card {
	padding: 30upx;
}
.group {
	font-size: 28upx;
	padding: 32upx 22upx;
	.title {
		color: #1c1c1e;

		.action {
			color: #000;
			font-size: 30upx;
			font-weight: blod;
		}

		&.solid-bottom {
			border-bottom-color: #f0f0f0;
		}
	}

	.row {
		padding: 36upx 10upx;
		.row-text {
			padding: 0 30upx;
			input {
				font-size: 28upx;
				color: #000;
			}
		}
	}

	.checkgroup {
		font-size: 30upx;
		color: #000;
		font-weight: blod;

		radio {
			transform: scale(0.7);
			margin-right: 16upx;
		}

		.radio-item + .radio-item {
			margin-left: 50upx;
		}
	}

	.submitBtn {
		margin: 50upx 30upx;
	}
	.link {
		display: inline-block;
		color: var(--nav-bg);
		font-size: 28rpx;
	}
}
</style>
